﻿$(function () {
    // TO CREATE AN INSTANCE
    // select the tree container using jQuery
    $("#divMenuTree")
    // call `.jstree` with the options object
		.jstree({
		    // the `plugins` array allows you to configure the active plugins on this instance
		    "plugins": ["themes", "html_data", "ui", "crrm", "hotkeys"],
		    // each plugin you have included can have its own config object
		    "core": { "initially_open": ["phtml_1"] }
		    // it makes sense to configure a plugin only if overriding the defaults
		})
    // EVENTS
    // each instance triggers its own events - to process those listen on the container
    // all events are in the `.jstree` namespace
    // so listen for `function_name`.`jstree` - you can function names from the docs
		.bind("loaded.jstree", function (event, data) {
		    // you get two params - event & data - check the core docs for a detailed description
		});
    // INSTANCES
    // 1) you can call most functions just by selecting the container and calling `.jstree("func",`
    setTimeout(function () { $("#divMenuTree").jstree("set_focus"); }, 500);
    // with the methods below you can call even private functions (prefixed with `_`)
    // 2) you can get the focused instance using `$.jstree._focused()`. 
    setTimeout(function () { $.jstree._focused().select_node("#phtml_1"); }, 1000);
    // 3) you can use $.jstree._reference - just pass the container, a node inside it, or a selector
    setTimeout(function () { $.jstree._reference("#phtml_1").close_node("#phtml_1"); }, 1500);
    // 4) when you are working with an event you can use a shortcut
    $("#divMenuTree").bind("open_node.jstree", function (e, data) {
        // data.inst is the instance which triggered this event
        data.inst.select_node("#phtml_2", true);
    });
    setTimeout(function () { $.jstree._reference("#phtml_1").open_node("#phtml_1"); }, 2500);
});

$(function () {
    $("#divMenuTree")
		.jstree({ "plugins": ["themes", "html_data", "ui"] })
    // 1) if using the UI plugin bind to select_node
		.bind("select_node.jstree", function (event, data) {
		    // `data.rslt.obj` is the jquery extended node that was clicked
		    alert(data.rslt.obj.attr("id"));
		})
    // 2) if not using the UI plugin - the Anchor tags work as expected
    //    so if the anchor has a HREF attirbute - the page will be changed
    //    you can actually prevent the default, etc (normal jquery usage)
		.delegate("a", "click", function (event, data) { event.preventDefault(); })
});
